<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>退出登录</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    :root {
      --primary-color: #3498db;
      --secondary-color: #2ecc71;
      --danger-color: #e74c3c;
      --warning-color: #f39c12;
      --dark-color: #34495e;
      --light-color: #ecf0f1;
      --border-color: #ddd;
    }

    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #f5f7fa;
      color: #333;
    }

 /*   .main-content {
      margin-left: 250px;
      transition: all 0.3s;
      padding: 20px;
    }*/

    .collapsed .main-content {
      margin-left: 70px;
    }

    .top-nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: white;
      padding: 15px 20px;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
      margin-bottom: 20px;
    }

    #toggleSidebar {
      background-color: var(--primary-color);
      border: none;
      padding: 8px 12px;
      border-radius: 6px;
      color: white;
      cursor: pointer;
      transition: all 0.3s;
    }

    #toggleSidebar:hover {
      background-color: #2980b9;
      transform: scale(1.05);
    }

    .user-info {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .user-info img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid var(--primary-color);
    }

    .user-info span {
      font-weight: 600;
      color: var(--dark-color);
    }

    .card {
      border: none;
      border-radius: 10px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      overflow: hidden;
      max-width: 600px;
      margin: 0 auto;
    }

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 20px;
      background-color: white;
      border-bottom: 1px solid var(--border-color);
    }

    .card-header h3 {
      margin: 0;
      color: var(--dark-color);
      font-weight: 600;
    }

    .card-body {
      padding: 30px;
      background-color: white;
    }

    .logout-container {
      max-width: 400px;
      margin: 0 auto;
      padding: 30px 0;
    }

    .logout-icon {
      font-size: 5em;
      color: var(--primary-color);
      margin-bottom: 25px;
      transition: all 0.3s;
    }

    .logout-message h4 {
      color: var(--dark-color);
      font-weight: 600;
      margin-bottom: 15px;
    }

    .logout-message p {
      color: #666;
      margin-bottom: 25px;
    }

    .logout-actions {
      display: flex;
      justify-content: center;
      gap: 15px;
    }

    .btn {
      padding: 10px 25px;
      border-radius: 6px;
      font-weight: 500;
      transition: all 0.2s;
      min-width: 120px;
    }

    .btn-secondary {
      background-color: var(--dark-color);
      border-color: var(--dark-color);
    }

    .btn-secondary:hover {
      background-color: #2c3e50;
      border-color: #2c3e50;
      transform: translateY(-2px);
    }

    .btn-danger {
      background-color: var(--danger-color);
      border-color: var(--danger-color);
    }

    .btn-danger:hover {
      background-color: #c0392b;
      border-color: #c0392b;
      transform: translateY(-2px);
    }

    /* 动画效果 */
    @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.1); }
      100% { transform: scale(1); }
    }

    .logout-icon:hover {
      animation: pulse 1.5s infinite;
    }

    /* 响应式设计 */
    @media (max-width: 992px) {
      .main-content {
        margin-left: 0;
      }

      .collapsed .main-content {
        margin-left: 0;
      }
    }

    @media (max-width: 768px) {
      .card {
        max-width: 100%;
      }

      .logout-actions {
        flex-direction: column;
      }

      .logout-actions .btn {
        width: 100%;
      }

      .user-info span {
        display: none;
      }
    }
  </style>
</head>
<body>
<div class="main-content">
  <div class="top-nav">
    <div>
      <button class="btn btn-primary" id="toggleSidebar">
        <i class="fas fa-bars"></i> 菜单
      </button>
    </div>
    <div class="user-info">
      <img src="https://via.placeholder.com/40" alt="用户头像">
      <span>北极星</span>
    </div>
  </div>

  <div class="card">
    <div class="card-header">
      <h3>退出登录</h3>
    </div>
    <div class="card-body">
      <div class="logout-container">
        <div class="logout-icon">
          <i class="fas fa-sign-out-alt"></i>
        </div>
        <div class="logout-message">
          <h4>确定要退出登录吗？</h4>
          <p>您将需要重新登录才能访问后台管理系统</p>
        </div>
        <div class="logout-actions">
          <button class="btn btn-secondary" id="cancelLogout">取消</button>
          <button class="btn btn-danger" id="confirmLogout">确认退出</button>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 确认退出模态框 -->
<div class="modal fade" id="logoutModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-body text-center p-4">
        <div class="logout-icon mb-3">
          <i class="fas fa-sign-out-alt"></i>
        </div>
        <h4 class="mb-3">正在退出系统...</h4>
        <div class="spinner-border text-primary" role="status">
          <span class="visually-hidden">Loading...</span>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
  // 切换侧边栏
  document.getElementById('toggleSidebar').addEventListener('click', function() {
    document.body.classList.toggle('collapsed');
  });

  // 取消退出
  document.getElementById('cancelLogout').addEventListener('click', function() {
    // 返回上一页或首页
    window.history.back();
  });

  // 确认退出
  document.getElementById('confirmLogout').addEventListener('click', function() {
    const logoutModal = new bootstrap.Modal(document.getElementById('logoutModal'));
    logoutModal.show();

    // 模拟退出过程
    setTimeout(() => {
      logoutModal.hide();
      // 在实际应用中这里应该跳转到登录页
      alert('您已成功退出系统');
      window.location.href = 'login.html'; // 替换为实际的登录页面
    }, 1500);
  });

  // 添加按钮悬停效果
  const buttons = document.querySelectorAll('.btn');
  buttons.forEach(button => {
    button.addEventListener('mouseenter', function() {
      this.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.1)';
    });

    button.addEventListener('mouseleave', function() {
      this.style.boxShadow = 'none';
    });
  });
</script>
</body>
</html>